<template>
  <div class="container p-4 mx-auto">
    <h1 class="mb-4 text-2xl font-bold">文本比对工具</h1>
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
      <!-- 原始文本 -->
      <div class="space-y-2">
        <label class="block text-sm font-medium">原始文本:</label>
        <textarea
          v-model="originalText"
          class="w-full h-64 p-2 font-mono border rounded-lg"
          placeholder="请输入原始文本..."
        ></textarea>
      </div>
      <!-- 比对文本 -->
      <div class="space-y-2">
        <label class="block text-sm font-medium">比对文本:</label>
        <textarea
          v-model="newText"
          class="w-full h-64 p-2 font-mono border rounded-lg"
          placeholder="请输入需要比对的文本..."
        ></textarea>
      </div>
    </div>

    <!-- 比对按钮 -->
    <div class="flex justify-center mt-4">
      <button
        @click="compareDiff"
        class="px-4 py-2 text-white transition-colors bg-blue-500 rounded-lg hover:bg-blue-600"
      >
        比对差异
      </button>
    </div>

    <!-- 比对结果 -->
    <div v-if="leftLines.length > 0" class="mt-8">
      <h2 class="mb-4 text-xl font-semibold">比对结果:</h2>
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
        <!-- 左侧原文 -->
        <div class="overflow-hidden border rounded-lg">
          <div class="px-4 py-2 font-medium border-b">原始文本</div>
          <div class="overflow-auto">
            <table class="w-full border-collapse">
              <tbody>
                <tr v-for="(line, index) in leftLines" :key="'left-' + index" 
                    :class="{
                      'bg-red-300': line.changed
                    }">
                  <td class="py-0.5 px-2 text-right text-gray-500 select-none border-r w-[50px]">
                    {{ index + 1 }}
                  </td>
                  <td class="py-0.5 px-4 font-mono whitespace-pre">
                    <span :class="{
                      'text-red-600': line.changed,
                      'bg-red-300': line.changed
                    }">{{ line.text || ' ' }}</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- 右侧新文本 -->
        <div class="overflow-hidden border rounded-lg">
          <div class="px-4 py-2 font-medium border-b">比对文本</div>
          <div class="overflow-auto">
            <table class="w-full border-collapse">
              <tbody>
                <tr v-for="(line, index) in rightLines" :key="'right-' + index"
                    :class="{
                      'bg-green-300': line.changed
                    }">
                  <td class="py-0.5 px-2 text-right text-gray-500 select-none border-r  w-[50px]">
                    {{ index + 1 }}
                  </td>
                  <td class="py-0.5 px-4 font-mono whitespace-pre">
                    <span :class="{
                      'text-green-600': line.changed,
                      'bg-green-300': line.changed
                    }">{{ line.text || ' ' }}</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { diffLines } from 'diff'

const originalText = ref(`{
  "projectName": "ExampleProject",
  "version": "1.0.0",
  "author": "John Doe",
  "dependencies": {
    "libraryA": "^1.2.3",
    "libraryB": "^3.4.5"
  },
  "devDependencies": {
    "toolX": "^0.9.8"
  },
  "scripts": {
    "start": "node index.js"
  }
}`)
                        
const newText = ref(`{
  "projectName": "ExampleProject",
  "version": "1.0.1",
  "author": "Jane Doe",
  "dependencies": {
    "libraryA": "^1.2.3",
    "libraryC": "^7.8.9"
  },
  "devDependencies": {
    "toolX": "^0.9.8",
    "toolY": "^2.3.4"
  },
  "scripts": {
    "start": "node app.js",
    "test": "npm test"
  }
}`)

const leftLines = ref<Array<{ text: string; changed: boolean }>>([])
const rightLines = ref<Array<{ text: string; changed: boolean }>>([])

const compareDiff = () => {
  // 使用diffLines进行行级别的比对
  const diff = diffLines(originalText.value, newText.value)
  
  leftLines.value = []
  rightLines.value = []
  
  // 处理比对结果
  diff.forEach(part => {
    const lines = part.value.split('\n')
    // 移除最后一个空行
    if (lines[lines.length - 1] === '') {
      lines.pop()
    }
    
    if (part.added) {
      // 添加到右侧，左侧添加空行
      lines.forEach(line => {
        leftLines.value.push({ text: '', changed: false })
        rightLines.value.push({ text: line, changed: true })
      })
    } else if (part.removed) {
      // 添加到左侧，右侧添加空行
      lines.forEach(line => {
        leftLines.value.push({ text: line, changed: true })
        rightLines.value.push({ text: '', changed: false })
      })
    } else {
      // 相同的行，两边都添加
      lines.forEach(line => {
        leftLines.value.push({ text: line, changed: false })
        rightLines.value.push({ text: line, changed: false })
      })
    }
  })
}
</script>

<style scoped>
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
</style> 